<template>
  <div class="login">
    <div class="content">
      <h3>叩叮狼电商管理系统</h3>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="userna">
          <el-input
            type="text"
            v-model="ruleForm.userna"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pws">
          <el-input
            type="password"
            v-model="ruleForm.pws"
            autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button style="width: 100%" type="primary" @click="submitForm"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { GetLoginApi } from "../request/aip";
export default {
  data() {
    return {
      ruleForm: {},
      rules: {
        userna: [{ validator: this.userfn, trigger: "blur" }],
        pws: [{ validator: this.userfn, trigger: "blur" }],
      },
    };
  },
  methods: {
    userfn(rule, value, cb) {
      // console.log(value);
      if (value) {
        cb();
      } else {
        cb("密码或者账号为空");
      }
    },
    // 点击
    submitForm() {
      this.$refs.ruleForm.validate((vali) => {
        if (vali) {
          // console.log("成功");
          GetLoginApi({
            username: this.ruleForm.userna,
            password: this.ruleForm.pws,
          }).then((res) => {
            // console.log(res.data.token);
            localStorage.setItem("token", res.data.token);
            this.$router.push("/index");
          });
        } else {
          // console.log("失败");
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
h3 {
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}
.login {
  background-color: #324057;
  // width: 100vw;
  height: 100%;
  overflow: hidden;
  .content {
    width: 400px;
    height: 300px;
    padding: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
  }
}
</style>
